<template>
    <div class="star">
        <div class="color" :style="{ width }">
            <img class="img" :src="s1" />
        </div>
        <img class="img" :src="s0" />
    </div>
</template>

<script lang="ts" setup>
import { computed, onMounted, ref } from "vue";

import s0 from "./Star0.png";
import s1 from "./Star.png";

const props = defineProps({
    num: Number
});

const width = computed(() => {
    const v = Number(props.num) * 100 + "%";
    console.log(v);
    return v;
});
</script>

<style lang="less" scoped>
.star {
    width: 20px;
    height: 20px;
    position: relative;
}
.color {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
    z-index: 1;
    // mix-blend-mode: difference;
}
.img {
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    display: block;
    padding: 0;
    margin: 0;
}
</style>
